<template>
    <div id="product-list-one">
        this is ProductListOne
        <ul>
            <li v-for="product of saleProducts">
                <span class="name">{{product.name}}</span>
                <span class="price">${{product.price}}</span>
            </li>
        </ul>
        <button @click="reducePrice()">产品降价</button>
    </div>
</template>

<script>
export default {
    name: 'ProductListOne',
    // props : ["products"]
    computed: {
        products() {
            return this.$store.state.products
        },
        saleProducts(){
            let saleProducts = this.$store.state.products.map(product => {
                return {
                    name:'**' + product.name + "**",
                    price: product.price / 2
                }
            })
            return saleProducts
        }
    },
    methods: {
        reducePrice() {
            // this.$store.state.products.forEach(product => {
            //     product.price -=1
            // })
            // this.$store.commit('reducePrice')
            this.$store.dispatch('reducePrice')
        }
    },  
}
</script>

<style scoped>
#product-list-one{
    background: #FFF8B1;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
    margin-bottom: 30px;
    padding: 10px 20px;
}
#product-list-one ul{
    padding: 0;
}
#product-list-one li{
    display: inline-block;
    margin-right: 10px;
    margin-top: 10px;
    padding: 20px;
    background: rgba(255,255,255,0.7);
}
.price{
    font-weight: bold;
    color: #E8800C;
}
</style>